/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package uk.ac.rdg.resc.mmd.controllers;

import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.SortedMap;
import org.joda.time.DateTime;

/**
 *
 * @author Alastair
 */
public class FlotController {

    public static void streamTimechart(OutputStream outputStream, SortedMap<DateTime, Float> obsData,
            SortedMap<DateTime, Float> modelData, HashMap<String, String> labels) throws IOException{
        
        PrintWriter out = new PrintWriter(outputStream);
       
        StringBuffer modelDataStrBuf = new StringBuffer("var modelData = [");
        for (DateTime date : modelData.keySet()) {
            modelDataStrBuf.append("[" + date.getMillis() + ", ");
            modelDataStrBuf.append(modelData.get(date) + "], ");
        }
        modelDataStrBuf.append("];");
        
        StringBuffer obsDataStrBuf = new StringBuffer("var obsData = [");
        for (DateTime date : obsData.keySet()) {
            obsDataStrBuf.append("[" + date.getMillis() + ", ");
            obsDataStrBuf.append(obsData.get(date) + "], ");
        }
        obsDataStrBuf.append("];");

        out.println("<html>");
        out.println("<head>");
        out.println("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">");
        out.println("<title>MashMyData Portal - Flot Model-Obs Timeseries</title>");
        out.println("<!--[if IE]><script language=\"javascript\" type=\"text/javascript\" src=\"js/excanvas.min.js\"></script><![endif]-->");
        out.println("<script language=\"javascript\" type=\"text/javascript\" src=\"js/jquery.js\"></script>");
        out.println("<script language=\"javascript\" type=\"text/javascript\" src=\"js/jquery.flot.js\"></script>");
        out.println("</head>");
        out.println("<body>");
        out.println("<img src=\"images/MMD_logo_v0.1.png\" alt=\"MashMyData banner\" height=\"100px\"/>");
        out.println("<a href=\"/MMDPortal/j_spring_security_logout\">Logout</a>");
        out.println("<br>");
        out.println("<hr>");
        out.println("<h3>" + labels.get("Title") + "</h3>");
        out.println("<div id=\"container\" style=\"width:620px;\">");
        out.println("<div id=\"left\" style=\"width:3px;height:300px; background-color:red;float:left; margin-right:5px;\"></div>");
        out.println("<div id=\"placeholder\" style=\"width:600px;height:300px;float:left;\"></div>");
        out.println("<div id=\"right\" style=\"width:3px;height:300px; background-color:blue;float:left; margin-left:5px;float:left;\"></div>");
        out.println("</div>");
        out.println("<div id=\"legendDiv\" style=\"clear: both; border:1px solid black;float:left; margin-left:20px; margin-top:20px;\"></div>");
        out.println("<script id=\"source\" language=\"javascript\" type=\"text/javascript\">");
        out.println("$(function () {");
        out.println(modelDataStrBuf.toString());
        out.println(obsDataStrBuf.toString());
        out.println("$.plot($(\"#placeholder\"),");
        out.println("[ { data: modelData, label: \"Model Temperature (degC)\", color: \"#0000ff\", yaxis: 2 },");
        out.println("  { data: obsData, label: \"Obs Proxy Value\", color: \"#ff0000\" }],");
        out.println("{");
        out.println("series: { lines: { show: true }, points: { show : true }},");
        out.println("grid: { hoverable: true },");
        out.println("xaxis: { mode: 'time' },");
        out.println("yaxis: {},");
        out.println("y2axis: {},");
        out.println("legend: { container: $(\"#legendDiv\") } });");

        out.println("function showTooltip(x, y, contents) {");
        out.println("$('<div id=\"tooltip\">' + contents + '</div>').css( {");
        out.println("position: 'absolute',");
        out.println("display: 'none',");
        out.println("top: y + 5,");
        out.println("left: x + 5,");
        out.println("border: '1px solid #fdd',");
        out.println("padding: '2px',");
        out.println("'background-color': '#fee',");
        out.println("opacity: 0.80");
        out.println("}).appendTo(\"body\").fadeIn(200);");
        out.println("}");
        out.println("var previousPoint = null;");
        out.println("$(\"#placeholder\").bind(\"plothover\", function (event, pos, item) {");
        out.println("$(\"#x\").text(pos.x.toFixed(2));");
        out.println("$(\"#y\").text(pos.y.toFixed(2));");
        out.println("if (item) {");
        out.println("if (previousPoint != item.datapoint) {");
        out.println("previousPoint = item.datapoint;");
        out.println("$(\"#tooltip\").remove();");
        out.println("var x = item.datapoint[0];");
        out.println("var y = item.datapoint[1].toFixed(2);");
        out.println("var months = new Array(\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\");");
        out.println("var date = new Date(x);");
        out.println("var monthStr = months[date.getMonth()];");
        out.println("var dayOfMonthStr = date.getDate();");
        out.println("var year = date.getYear();");
        out.println("if (year < 1000) {");
        out.println("year += 1900;");
        out.println("// on IE and Opera, Date.getYear() returns year (e.g. 1997) but on other browsers year after 1900 (e.g. 97) is returned");
        out.println("}");
        out.println("var dateStr = monthStr + \" \" + year;");
        out.println("showTooltip(item.pageX, item.pageY, \"date = \" + dateStr + \", value = \" + y);");
        out.println("}");
        out.println("}");
        out.println("else {");
        out.println("$(\"#tooltip\").remove();");
        out.println("previousPoint = null;");
        out.println("}");
        out.println("});");

        out.println("});");
        out.println("</script>");
        out.println("</body>");
        out.println("</html>");
        
        out.flush();
        out.close();
    }
}
